Making of 3fz

Inspiration behind the name

3fz.org emerged from my search for an inexpensive three-character domain with a .com or .org TLD. Letters-only domains are extremely expensive in the four-character and under range with classic TLDs. But throw in a number, and the options open up. 3fz rolls off the tongue; it rhymes (except for Canadians), and I think it looks nice as a logo in a good serif font.

The look

The rotating polyhedra background emerges from a fascination with polyhedra and their mathematical definitions which can be straightforwardly programmed in three.js, with Claude Code handling the syntax. I may put up a dedicated page for playing around with them.

Readbility may take a hit with the busy background. I am looking into it.

The wavy liquid glass effect is implemented as an SVG filter. By the way, if you’re not seeing it, you’re probably not on a Chromium-based browser. Try as I might, I couldn’t get it to work properly on Firefox or Safari (yet - stay tuned for updates).

I developed the effect as a rip off of a rip off of Apple Inc’s Liquid Glass. It aims for the liquid glass feel, but I am no longer trying to emulate their implementation. I am aiming for the effect of looking through a window made of optically-flawed glass, or a decorative wavy glass brick. The horizontally striped background shows off the effect. It looks particularly nice when scrolled very slowly with a trackpad.

The navbar buttons feature the same SVG filter glass effect, as well as bouncy hover animations. Some may feel that the position of menu items shouldn’t change under your cursor, as this can negatively impact usability. I have taken all factors into careful consideration and decided to throw UX out the window—then upon reflection, determined that effect can be done well, when care is taken not to change the selection unexpectedly upon hover.

Hover the logo and you’ll see a particle scattering effect. This is another three.js scene, using GSAP for animation logic.

The SVG filters are a particularly heavy-hitter on the GPU—this is not a lightweight site.

That’s not to say that performance wasn’t a concern. I have aimed for minimal latency. Modern computers are extremely powerful, and there’s no better way to take advantage of that than by adding aesthetic flair to low-stakes websites.

The rest of the tech stack

3fz.org is built with Svelte and SvelteKit, with MDsveX as a markdown preprocessor.